<template>
    <n-drawer v-model:show="sideActive" :width="502" :placement="placement">
        <n-drawer-content title="分类选择">
            <n-select v-model:value="value" multiple :options="options" remote />
        </n-drawer-content>
    </n-drawer>
    <div>
        <div class="AvatarWidget">
            <n-space size="large" justify="end">
                <n-avatar round :size="48" :src="userAvatar" />
                <p>{{ username }}</p>
            </n-space>
        </div>
        <div style="position: fixed;top: 70px;left: 10px;overflow-y: scroll;height: 900px;">
            <n-grid :cols="6" x-gap="12">
                <template v-for="movie in movies" :key="movie.movieId">
                    <n-gi>
                        <n-card :title="movie.name" style="max-width:200px;height:300px">
                            <template v-slot:cover>
                                <img :src="movie.imgUrl" />
                            </template>

                            <n-rate readonly :default-value="movie.stars" />
                            <n-button quaternary type="info" @click="goToMovieDetial(movie.name)">
                                详情
                            </n-button>

                        </n-card>
                    </n-gi>
                </template>
            </n-grid>
        </div>


        <div class="Paging">
            <n-space>
                <!--n-pagination v-model:page="page" :page-count="totalPage" size="large" /-->
                <n-button @click="activeSide">分类</n-button>
                <n-button @click="logout">登出</n-button>
                <!-- <n-button @click="login">登录</n-button> -->
                <!-- <n-button @click="register">注册</n-button> -->
            </n-space>
        </div>
    </div>
</template>
<script>
import { useRouter } from 'vue-router'
import { useStore } from 'vuex';
import { ref } from 'vue';
import { fetchCatagories, fetchMovies, filterMovie } from "../util";



export default {
    setup() {
        const store = useStore();
        window.$store = store;
        var userAvatar = ref(store.state.user.photo);
        var username = ref(store.state.user.username);
        const router = useRouter();
        const logout = () => {
            console.log(`${store.state.user}`);
            store.dispatch("logout");
            router.push({ name: "home" });
        };
        const goToMovieDetial = (movie_name) => {
            console.log(movie_name);
            router.push({ name: "movieDetail", params: { name: movie_name } });
        }
        return {
            store,
            logout,
            userAvatar,
            username,
            goToMovieDetial,
        };
    },
    mounted() {

        fetchCatagories().then(
            (respond) => {
                console.log("in fetchCategories");
                console.log(respond);
                for (const v of respond.categories) {
                    this.options.push({
                        label: v,
                        value: v
                    })
                }
                console.log(respond.categories);
            }
        );
        fetchMovies().then(
            (respond) => {
                console.log("in fetchMovies");
                console.log(respond);
                this.movies = respond.movies;
            }
        )
    },
    data() {
        var movies = []
        return {
            //userAvatar: "https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg",
            //username: "Nakano Azusa",
            movies,
            sideActive: false,
            placement: "top",
            value: [],
            options: [],// 所以电影类别
            showModal: false,
            showModal1: false,
            name: '',
            password: '',
            passwordConfirm: '',
        };
    },
    watch: {
        sideActive(nv) {
            if (!nv) {
                if (this.value.length > 0) {
                    filterMovie(this.value).then((respond) => {
                        this.movies = respond.movies;
                    })
                } else {
                    fetchMovies().then((resp)=> {
                        this.movies = resp.movies;
                    })
                }

            }
        }
    },
    methods: {
        activeSide() {
            this.sideActive = true;
        },
        goInfo(id) {
            this.$router.push(`/movies/${id}`)
        },
    },
    components: {}
};
</script>
<style scoped>
.AvatarWidget {
    position: fixed;
    top: 10px;
    right: 20px;
}

.Paging {
    position: fixed;
    top: 20px;
    right: 200px;
}
</style>